<template>
    <view class="w-100">
        <!-- 添加动画容器和动画类 -->
        <view class="page-container">
            <view class="page-item" :class="{
                active: activeIndex == 0,
                prev: activeIndex > 0,
                next: activeIndex < 0,
            }">
                <scroll-view enable-back-to-top @scrolltolower="activeScrolltolower" class="scroll" scroll-y
                    refresher-enabled :refresher-triggered="refreshA" @refresherrefresh="refreshA = true" @scroll="scrollA">
                    <page-a ref="pageA" @resetPage="activeResetPage" @openCalendar="openCalendar"
                        @openStatePopup="openStatePopup" :page="activePage" @refreshState="refreshA = false"
                        :refresh="refreshA" :isVisible="activeIndex === 0" :pageSize="activePageSize"
                        :scrollTop="scrollTopA"></page-a>
                </scroll-view>
<!--                <wu-calendar @cancel="cancelCalendar" @confirm="calendarConfirm" type="week" confirmColor="#fff"-->
<!--                    ref="calendar" :insert="false" mode="range" maskClick operationPosition="bottom" :fold="false"-->
<!--                    confirmFullDate color="#14cc60"></wu-calendar>-->
                <!-- 活动状态选择弹窗 -->
                <uni-popup ref="statePopup" type="bottom" background-color="#ffffff" borderRadius="30rpx 30rpx 0 0">
                    <view class="slanted-rectangles br-30 pt-10 flex-dir-col ali-item-cen">
                        <picker-view indicator-style="height: 50px;" :value="stateArr" @change="onStateChange"
                            class="picker-view" style="height: 250rpx">
                            <picker-view-column>
                                <view class="text-ali-c" style="line-height: 50px" v-for="(item, index) in stateList"
                                    :key="index">
                                    {{ item }}
                                </view>
                            </picker-view-column>
                        </picker-view>
                        <view class="w-100 flex-dir-row flex-x-spa ali-item-cen mt-20 text-ali-c fs-26">
                            <view @click="cancelState" class="bac-col-fa br-20 gender-btn">取消</view>
                            <view @click="confirmState" class="bac-col-00b col-f br-20 gender-btn">确定
                            </view>
                        </view>
                    </view>
                </uni-popup>
            </view>

            <view class="page-item" :class="{
                active: activeIndex == 1,
                prev: activeIndex > 1,
                next: activeIndex < 1,
            }">
                <scroll-view enable-back-to-top @scrolltolower="circleScrolltolower" class="scroll" scroll-y
                    refresher-enabled :refresher-triggered="refreshB" @refresherrefresh="refreshB = true" @scroll="scrollB">
                    <page-b ref="pageB" @resetPage="circleResetPage" :page="circlePage" @refreshState="refreshB = false"
                        :refresh="refreshB" :isVisible="activeIndex === 1" :pageSize="circlePageSize"
                        :scrollTop="scrollTopB"></page-b>
                </scroll-view>
            </view>

            <view class="page-item" :class="{
                active: activeIndex == 2,
                prev: activeIndex > 2,
                next: activeIndex < 2,
            }">
                <scroll-view enable-back-to-top class="scroll" scroll-y refresher-enabled @scrolltolower="mallScrolltolower"
                    @refresherrefresh="refreshC = true" :refresher-triggered="refreshC">
                    <page-c ref="pageC" @resetPage="mallResetPage" :isVisible="activeIndex === 2"
                        @refreshState="refreshC = false" :refresh="refreshC" :page="mallPage"
                        :pageSize="mallPageSize"></page-c>
                </scroll-view>
            </view>

            <view class="page-item" :class="{
                active: activeIndex == 3,
                prev: activeIndex > 3,
                next: activeIndex < 3,
            }">
                <scroll-view enable-back-to-top class="scroll" scroll-y refresher-enabled
                    @refresherrefresh="refreshD = true" :refresher-triggered="refreshD">
                    <page-d ref="pageD" v-if="activeIndex == 3" :isVisible="activeIndex === 3"
                        @messageChange="(e) => (messageCount = e)" @refreshState="refreshD = false"
                        :refresh="refreshD"></page-d>
                </scroll-view>
            </view>

            <view class="page-item" :class="{
                active: activeIndex == 4,
                prev: activeIndex > 4,
                next: activeIndex < 4,
            }">
                <scroll-view enable-back-to-top class="scroll bac-col-fa" scroll-y refresher-enabled
                    @refresherrefresh="refreshE = true" :refresher-triggered="refreshE">
                    <page-e ref="pageE" :isVisible="activeIndex === 4" @refreshState="refreshE = false"
                        :refresh="refreshE"></page-e>
                </scroll-view>
            </view>
        </view>

        <qmy-custom-tabbar :items="tabberList" @tabClick="tabClick" :messageCountObj="messageCount"></qmy-custom-tabbar>

        <!-- 发布弹窗 -->
        <uni-popup ref="publishPopup" type="bottom" background-color="#ffffff" border-radius="20rpx 20rpx 0 0">
            <view class="publish-rectangle">
                <view class="mt-40 padding-50">
                    <view class="flex-dir-row ali-item-cen flex-x-bet">
                        <view class="box-1" @tap="$NavigateTo('/pages/publish/article')">
                            <image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/fzx.png"
                                class="image-1">
                            </image>
                            <view class="flex-x-bet flex-dir-col full-height">
                                <view class="fs-40 fw-600">发圈子</view>
                                <view class="fs-28 col-54">分享美好瞬间</view>
                            </view>
                        </view>
                        <view class="box-2" @tap="$NavigateTo('/pages/publish/notice')">
                            <image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/ftz.png"
                                class="image-2">
                            </image>
                            <view class="flex-x-bet flex-dir-col full-height">
                                <view class="fs-40 fw-600">发通知</view>
                                <view class="fs-28 col-54 mt-10">通知成员活动事项</view>
                            </view>
                        </view>
                    </view>
                    <view class="box-3" @click="$NavigateTo('/pages/publish/activity')">
                        <image src="https://mp-1a195ae8-6052-4d67-9e67-d73bf0b3c084.cdn.bspapp.com/fhd.png" class="image-3">
                        </image>
                        <view class="flex-x-bet flex-dir-col full-height">
                            <view class="fs-40 fw-600">发活动</view>
                            <view class="fs-28 col-54 mt-10">开始组织你的活动</view>
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>
        
        <!-- 隐私协议弹窗 -->
        <privacy-popup ref="privacyPopup" @agree="onPrivacyAgree" @reject="onPrivacyReject"></privacy-popup>
    </view>
</template>

<script>
import PageA from "./component/pageA.vue";
import PageB from "./component/pageB.vue";
import pageC from "./component/pageC.vue";
import pageD from "./component/pageD.vue";
import pageE from "./component/pageE.vue";
import store from '@/utils/store.js';
export default {
    components: {
        PageA,
        PageB,
        pageC,
        pageD,
        pageE,
    },
    data() {
        return {
            activeIndex: 0,
            prevIndex: 0, // 添加prevIndex记录上一个索引
            scrollTopA: 0,
            scrollTopB: 0,
            tabberList: [
                {
                    icon_select: "/static/tabber/hd.png",
                    icon_not: "/static/tabber/hds.png",
                    label: "首页",
                },
                {
                    icon_select: "/static/tabber/zx.png",
                    icon_not: "/static/tabber/zxs.png",
                    label: "圈子",
                },
                {
                    icon_select: "/static/tabber/fb.png",
                    icon_not: "/static/tabber/fbs.png",
                    label: "发布",
                    isCenter: true,
                },

                {
                    icon_select: "/static/tabber/tz.png",
                    icon_not: "/static/tabber/tzs.png",
                    label: "消息",
                },
                {
                    icon_select: "/static/tabber/wd.png",
                    icon_not: "/static/tabber/wds.png",
                    label: "我的",
                },
            ],
            activePage: 0, //活动分页页码
            activePageSize: 10, //活动分页每页数量
            circlePage: 0, //圈子分页页码
            circlePageSize: 10, //圈子分页每页数量
            mallPage: 0, //周边商城分页页码
            mallPageSize: 10, //周边商城分页每页数量
            refreshA: false,
            refreshB: false,
            refreshC: false,
            refreshD: false,
            refreshE: false,
            stateArr: [0],
            stateIndex: 0,
            stateList: ["全部", "报名中", "进行中", "已结束"],
            messageCount: 0, //未读消息数量
            showAuthorizationModal: false,
            tokenExpired: null, //token过期时间
        };
    },
    computed: {
        userInfo() {
            // token过期检查已在认证管理器中处理
            this.tokenExpired = Date.now() + 24 * 60 * 60 * 1000; // 默认24小时后过期
            return this.$store.state.userInfo; //用户信息
        },
        count() {
          return this.$store.state.count;
        }
    },
    onShow() {
        // 检查隐私协议
        this.checkPrivacy();

        // 获取最新消息
        // this.$refs.pageD.getCircleNoticeList();
        // this.$refs.pageD.getActivityNoticeList();
        // this.$refs.pageD.getSystemNoticeList();
        if (this.activeIndex === 4) {
            console.log(this.userInfo, '======================?');
            this.$refs.pageE.getUserLoginInfo();
        }
    },
    onLoad(options) {
        this.uniIdRedirectUrl = decodeURIComponent(options.uniIdRedirectUrl);
    },
    methods: {
        tabClick(e) {
            if (e === 2) {
                this.showPublishOptions();
                return;
            }
            // 如果不是发布tab，则关闭发布弹窗
            if (e !== 2) {
                this.$refs.publishPopup.close();
            }
            // 记录上一个索引
            this.prevIndex = this.activeIndex;
            this.activeIndex = e;
           
        },

        // 显示发布选项
        showPublishOptions() {
            this.$refs.publishPopup.open("bottom");
        },
        //滚动触发
        scrollA(e) {
            this.scrollTopA = parseInt(e.detail.scrollTop); // 滚动条距离顶部高度
        },
        scrollB(e) {
            this.scrollTopB = parseInt(e.detail.scrollTop); // 滚动条距离顶部高度
        },
        activeScrolltolower(e) {
            this.activePage++;
        },
        activeResetPage(e) {
            this.activePage = 0;
        },
        circleScrolltolower(e) {
            this.circlePage++;
        },
        circleResetPage(e) {
            this.circlePage = 0;
        },
        mallScrolltolower(e) {
            this.mallPage++;
        },
        mallResetPage(e) {
            this.mallPage = 0;
        },
        // 打开日历
        openCalendar() {
            this.$refs.calendar.open();
        },
        // 日历确认
        calendarConfirm(e) {
            this.$refs.pageA.calendarConfirm(e);
        },
        // 重置选择
        cancelCalendar() {
            this.$refs.pageA.calendarCancel();
        },
        // 打开活动状态选择弹窗
        openStatePopup() {
            this.$refs.statePopup.open();
        },
        // 活动状态选择弹窗取消
        cancelState() {
            this.$refs.statePopup.close();
        },
        // 活动状态选择弹窗确定
        confirmState() {
            this.$refs.pageA.switchState(this.stateIndex);
            this.$refs.statePopup.close();
        },
        
        // 检查隐私协议
        checkPrivacy() {
            // 检查是否支持隐私协议API
            if (uni.getPrivacySetting) {
                uni.getPrivacySetting({
                    success: (res) => {
                        if (res.needAuthorization) {
                            // 需要用户授权，显示隐私协议弹窗
                            setTimeout(() => {
                                if (this.$refs.privacyPopup) {
                                    this.$refs.privacyPopup.show();
                                }
                            }, 1000);
                        }
                    },
                    fail: (err) => {
                        console.error('获取隐私设置失败:', err);
                    }
                });
            }
        },
        
        // 用户同意隐私协议
        onPrivacyAgree() {
            console.log('用户同意隐私协议');
            uni.setStorageSync('privacyAgreed', true);
        },
        
        // 用户拒绝隐私协议
        onPrivacyReject() {
            console.log('用户拒绝隐私协议');
            uni.setStorageSync('privacyAgreed', false);
        },
        // 更新状态索引
        onStateChange(e) {
            this.stateIndex = e.detail.value[0];
        },
        // 获取到的用户信息
        async updatedUserInfoEvent(info) {
            let avatarUrl = info.avatar;
            let avatar_file = {
                extname: avatarUrl.split(".")[avatarUrl.split(".").length - 1],
                name: "",
                url: "",
            };
            //上传到服务器
            let cloudPath = this.userInfo.id + "" + Date.now();
            avatar_file.name = cloudPath;
            try {
                uni.showLoading({
                    title: "更新中",
                    mask: true,
                });
                // 使用自定义上传方法
                const { upload } = require("@/utils/request.js");
                const uploadResult = await upload("/api/upload/avatar", {
                    file: avatarUrl,
                });
                avatar_file.url = uploadResult.data.url;
                uni.hideLoading();
            } catch (e) {
                console.error(e);
            }
            mutations.updateUserInfo({
                nickname: info.nickname,
                avatar_file: avatar_file,
            });
            this.showAuthorizationModal = false;
        },
    },
};
</script>

<style lang="scss">
/* 发布弹窗样式 */
.publish-rectangle {
    position: relative;
    width: 100%;
    background-color: white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    padding-bottom: 20rpx;
    bottom: -20rpx;
    z-index: 2;
}

.publish-rectangle::before {
    content: "";
    position: absolute;
    top: -95rpx;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    transform: skewY(3deg);
    border-radius: 40rpx 40rpx 0 0;
}

.padding-50 {
    padding: 50rpx;
}

.full-height {
    height: 100%;
}

.box-1 {
    background: #cae8ff;
    border-radius: 20rpx;
    position: relative;
    padding: 45rpx 35rpx;
    width: 48%;
    height: 190rpx;
    z-index: 4;
}

.image-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 170rpx;
    height: 170rpx;
    z-index: 4;
}

.box-2 {
    background: #f2fa91;
    border-radius: 20rpx;
    position: relative;
    padding: 45rpx 35rpx;
    width: 48%;
    height: 190rpx;
    z-index: 4;
}

.image-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 135rpx;
    height: 170rpx;
    z-index: 4;
}

.box-3 {
    background: #a9f5c3;
    border-radius: 20rpx;
    position: relative;
    padding: 45rpx 35rpx;
    width: 100%;
    height: 190rpx;
    margin-top: 30rpx;
    z-index: 4;
}

.image-3 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 220rpx;
    height: 220rpx;
    z-index: 4;
}

.scroll {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

/* 页面容器样式 */
.page-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 页面项样式 */
.page-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
    opacity: 0;
    transform: translateX(100%);
    z-index: 1;
}

/* 活动状态 - 当前显示的页面 */
.page-item.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

/* 上一个页面状态 - 向左移出 */
.page-item.prev {
    transform: translateX(-100%);
    opacity: 0;
}

/* 下一个页面状态 - 向右等待 */
.page-item.next {
    transform: translateX(100%);
    opacity: 0;
}

.slanted-rectangles {
    position: relative;
    width: 100%;
    background-color: white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    bottom: -20rpx;
    z-index: 2;
    padding-bottom: 50rpx !important;
    padding-bottom: calc(50rpx + constant(safe-area-inset-bottom)) !important;
    padding-bottom: calc(50rpx + env(safe-area-inset-bottom)) !important;
}

.slanted-rectangles::before {
    content: "";
    position: absolute;
    top: -46rpx;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    transform: skewY(3deg);
    border-radius: 40rpx 40rpx 0 0;
}

.gender-btn {
    width: 270rpx;
    height: 80rpx;
    line-height: 80rpx;
}

.picker-view {
    width: 750rpx;
    height: 350rpx;
    margin-top: 20rpx;
}
</style>
